<template>
  <div id="map" style="width: 100%;height:100vh"></div>
</template>
<script>
  import L from "leaflet";
  import "leaflet/dist/leaflet.css";
  import "leaflet.chinatmsproviders"
  export default {
    name: 'leafletmap',
    mounted() {
      this.initMap();
    },
    methods:{
      initMap() {
        // var mymap = L.map('map').setView([51.505, -0.09], 13);
        // L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
        //   maxZoom: 18,
        //   attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
        //     '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
        //     'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        //   id: 'mapbox/streets-v11',
        //   tileSize: 512,
        //   zoomOffset: -1
        // }).addTo(mymap);
        // L.marker([51.5, -0.09]).addTo(mymap)
        //   .bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
        // L.circle([51.508, -0.11], 500, {
        //   color: 'red',
        //   fillColor: '#f03',
        //   fillOpacity: 0.5
        // }).addTo(mymap).bindPopup("I am a circle.");
        // L.polygon([
        //   [51.509, -0.08],
        //   [51.503, -0.06],
        //   [51.51, -0.047]
        // ]).addTo(mymap).bindPopup("I am a polygon.");
        // var popup = L.popup();
        // function onMapClick(e) {
        //   popup
        //     .setLatLng(e.latlng)
        //     .setContent("You clicked the map at " + e.latlng.toString())
        //     .openOn(mymap);
        // }
        // mymap.on('click', onMapClick);

        /**
         * 智图地图内容
         */
        var normalm1 = L.tileLayer.chinaProvider('Geoq.Normal.Map', {
          maxZoom: 18,
          minZoom: 5
        });
        var normalm2 = L.tileLayer.chinaProvider('Geoq.Normal.Color', {
          maxZoom: 18,
          minZoom: 5
        });
        var normalm3 = L.tileLayer.chinaProvider('Geoq.Normal.PurplishBlue', {
          maxZoom: 18,
          minZoom: 5
        });
        var normalm4 = L.tileLayer.chinaProvider('Geoq.Normal.Gray', {
          maxZoom: 18,
          minZoom: 5
        });
        var normalm5 = L.tileLayer.chinaProvider('Geoq.Normal.Warm', {
          maxZoom: 18,
          minZoom: 5
        });
        var normalm6 = L.tileLayer.chinaProvider('Geoq.Normal.Cold', {
          maxZoom: 18,
          minZoom: 5
        });
        /**
         * 天地图内容
         */
        var normalm = L.tileLayer.chinaProvider('TianDiTu.Normal.Map', {
            maxZoom: 18,
            minZoom: 5
          }),
          normala = L.tileLayer.chinaProvider('TianDiTu.Normal.Annotion', {
            maxZoom: 18,
            minZoom: 5
          }),
          imgm = L.tileLayer.chinaProvider('TianDiTu.Satellite.Map', {
            maxZoom: 18,
            minZoom: 5
          }),
          imga = L.tileLayer.chinaProvider('TianDiTu.Satellite.Annotion', {
            maxZoom: 18,
            minZoom: 5
          });

        var normal = L.layerGroup([normalm, normala]),
          image = L.layerGroup([imgm, imga]);
        /**
         * 谷歌
         */
        var normalMap = L.tileLayer.chinaProvider('Google.Normal.Map', {
            maxZoom: 18,
            minZoom: 5
          }),
          satelliteMap = L.tileLayer.chinaProvider('Google.Satellite.Map', {
            maxZoom: 18,
            minZoom: 5
          });
        /**
         * 高德地图
         */
        var Gaode = L.tileLayer.chinaProvider('GaoDe.Normal.Map', {
          maxZoom: 18,
          minZoom: 5
        });
        var Gaodimgem = L.tileLayer.chinaProvider('GaoDe.Satellite.Map', {
          maxZoom: 18,
          minZoom: 5
        });
        var Gaodimga = L.tileLayer.chinaProvider('GaoDe.Satellite.Annotion', {
          maxZoom: 18,
          minZoom: 5
        });
        var Gaodimage = L.layerGroup([Gaodimgem, Gaodimga]);



        var baseLayers = {
          "智图地图": normalm1,
          "智图多彩": normalm2,
          "智图午夜蓝": normalm3,
          "智图灰色": normalm4,
          "智图暖色": normalm5,
          "智图冷色": normalm6,
          "天地图": normal,
          "天地图影像": image,
          "谷歌地图": normalMap,
          "谷歌影像": satelliteMap,
          "高德地图": Gaode,
          "高德影像": Gaodimage,

        }

        var map = L.map("map", {
          center: [31.59, 120.29],
          zoom: 12,
          layers: [normalm1],
          zoomControl: false
        });

        L.control.layers(baseLayers, null).addTo(map);
        L.control.zoom({
          zoomInTitle: '放大',
          zoomOutTitle: '缩小'
        }).addTo(map);
      }
    }
  }
</script>
